<template>
    <dialog-layer :visible.sync="show" id="preview-file-dialog-layer">
        <template slot="title">
            <span class="el-icon-folder-opened"></span> 文件预览
        </template>
        <template slot="button">
            <el-button type="text" @click="toggleFullScreen('preview-file-dialog-layer')" v-if="!isFullscreen">全屏</el-button>
            <el-button type="text" @click="toggleFullScreen('preview-file-dialog-layer')" v-else>退出</el-button>
        </template>
        <div class="page-wrap" style="padding:0;">
            <video-player v-if="fileType=='VIDEO'" :url="url"></video-player>
            <audio-player v-if="fileType=='AUDIO'" :url="url" :name="name" :crtName="crtName"></audio-player>
            <doc-preview v-if="fileType=='DOCUMENT' || fileType == 'IMAGE'" :url="url" :height="height"></doc-preview>
            <doc-preview v-else :url="url" :height="height"></doc-preview>
        </div>
    </dialog-layer>
</template>

<script>
    import DialogLayer from '@/components/DialogLayer';
    import docPreview from './docPreview';
    import videoPlayer from './videoPlayer';
    import audioPlayer from './audioPlayer';
    import { getAtthById, getByIdMyDoc, getByIddDoc } from '@/service/core/dictionary';
    import baseURL from '@/utils/baseURL'
    export default {
        name: 'previewFile',
        props: {
            id: String,
        },
        components: {
            DialogLayer,
            docPreview,
            videoPlayer,
            audioPlayer,
        },
        data() {
            return {
                show: false,
                fileType: '',
                url: '',
                name: '',
                crtName: '',
                height: 0,
                isFullscreen: false,
                type: '',
            }
        },
        methods: {
            getAtthByIdFun(id) {
                let params = {
                    id: id
                }
                if(this.type == 'MYDOC'){
                    getByIdMyDoc(params).then(res => {
                        if(res.data.code == 1000) {
                            let data = res.data.data;
                            if(data) {
                                this.fileType = data.fileType;
                                this.url = data.fileUrl;
                                this.name = data.fileName;
                                this.crtName = data.crtName;
                            }
                        }
                    })
                }else if(this.type == 'DOC'){
                    getByIddDoc(params).then(res => {
                        if(res.data.code == 1000) {
                            let data = res.data.data;
                            if(data) {
                                this.fileType = data.fileType;
                                this.url = data.fileUrl;
                                this.name = data.fileName;
                                this.crtName = data.crtName;
                            }
                        }
                    })
                }else{
                    getAtthById(params).then(res => {
                        if(res.data.code == 1000) {
                            let data = res.data.data;
                            if(data) {
                                this.fileType = data.fileType;
                                this.url = baseURL.fileURL + data.htmlUrl;
                                this.name = data.fileName;
                                this.crtName = data.crtName;
                            }
                        }
                    })
                }
                
            },
            showPreview(id,type) {
                this.type = type
                let frame = document.getElementById('main-page');
                let parentEle = frame[frame.firstElementChild ? 'firstElementChild' : 'firstChild'];
                parentEle.append(this.$el);
                this.show = true;
                if(id) {
                    this.getAtthByIdFun(id);
                }
            },
            FullScreen(el) {
                if (this.isFullscreen) { // 退出全屏
                    if (document.exitFullscreen) {
                        document.exitFullscreen()
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen()
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen()
                    } else if (!document.msRequestFullscreen) {
                        document.msExitFullscreen()
                    }
                    this.isFullscreen = false;
                } else { // 进入全屏
                    if (el.requestFullscreen) {
                        el.requestFullscreen()
                    } else if (el.mozRequestFullScreen) {
                        el.mozRequestFullScreen()
                    } else if (el.webkitRequestFullscreen) {
                        el.webkitRequestFullscreen();
                    } else if (el.msRequestFullscreen) {
                        el.msRequestFullscreen()
                    }
                    this.isFullscreen = true;
                }
            },
            toggleFullScreen(id) {
                var el = document.getElementById(id);
                this.FullScreen(el);
            },
        }
    }

</script>

